<template>
    <div
        class="page_root"
        :key="queryUpdateFlag"
        data-page-name="平台项目-版本管理"
        data-page-identification="g_xzx7l3whq4"
    >
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!--          查看任务-->
            <a-modal
                width="100vw"
                v-model:visible="taskMoadlVisible"
                :mask-closable="false"
                :keyboard="false"
                centered
                destroy-on-close
                :footer="null"
            >
                <TaskJump :iterationVersionId="taskModalId" />
            </a-modal>
            <!--          查看任务-->
            <!-- begin vid_qyl0iu990t 自定义模板_wz3g4kitti -->
            <!--          新建/编辑版本-->
            <a-modal
                :visible="state.addOrEditVisible"
                :title="state.addOrEditTitle"
                :mask-closable="false"
                :keyboard="false"
                centered
                width="800px"
                @ok="handleSubmitVersion"
                @cancel="cancelAddOrEdit"
                :body-style="{
                    maxHeight: '800px',
                    overflowY: 'auto'
                }"
                destroy-on-close
                :ok-button-props="{ loading: state.submitVersionLoading }"
            >
                <div class="form-div">
                    <a-form :model="state.modelForm" ref="addOrEditRef" :rules="rules">
                        <a-row>
                            <a-col :span="24">
                                <a-form-item label="版本号" name="version">
                                    <a-input
                                        :disabled="currentVersionData.status === '已发布'"
                                        v-model:value="state.modelForm.version"
                                        :placeholder="inputHolder"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="计划开始时间" name="startTime">
                                    <a-date-picker
                                        style="width: 100%"
                                        value-format="YYYY-MM-DD"
                                        v-model:value="state.modelForm.startTime"
                                        :placeholder="selectHolder"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="计划发布时间" name="endTime">
                                    <a-date-picker
                                        style="width: 100%"
                                        value-format="YYYY-MM-DD"
                                        v-model:value="state.modelForm.endTime"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item label="描述" name="description">
                                    <a-textarea :rows="6" v-model:value="state.modelForm.description" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
            </a-modal>
            <!--          新建/编辑版本-->
            <!--          版本合并-->
            <a-modal
                :visible="state.mergeVisible"
                title="版本合并"
                :mask-closable="false"
                :keyboard="false"
                centered
                @ok="handleSubmitMergeVersion"
                @cancel="cancelMerge"
                :body-style="{
                    maxHeight: '800px',
                    overflowY: 'auto'
                }"
                destroy-on-close
                :ok-button-props="{ loading: state.mergeLoading }"
            >
                <div class="merge-form-div">
                    <div class="top-tip"><WarningOutlined class="tip-img" /> 一旦版本合并后，您就无法还原。</div>
                    <a-form :model="state.mergeForm" ref="mergeRef" :rules="mergeRules">
                        <a-row>
                            <a-col :span="24">
                                <a-form-item label="合并版本" name="beMergeList">
                                    <a-select
                                        v-model:value="state.mergeForm.beMergeList"
                                        placeholder="请选择"
                                        allowClear
                                        :options="beMergeOptions"
                                        mode="multiple"
                                        show-search
                                        :filter-option="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item label="合并至版本" name="mergeTo">
                                    <a-select
                                        v-model:value="state.mergeForm.mergeTo"
                                        placeholder="请选择"
                                        allowClear
                                        :options="mergeToOptions"
                                        show-search
                                        :filter-option="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
            </a-modal>
            <!--          版本合并-->
            <!--          发布版本-->
            <a-modal
                :visible="state.releaseVisible"
                :title="state.releaseTitle"
                :mask-closable="false"
                :keyboard="false"
                centered
                @ok="handleSubmitReleaseVersion"
                @cancel="cancelRelease"
                :body-style="{
                    maxHeight: '800px',
                    overflowY: 'auto'
                }"
                destroy-on-close
                :ok-button-props="{ loading: state.releaseLoading }"
            >
                <div class="merge-form-div">
                    <div class="top-tip red-color"
                        ><WarningOutlined class="tip-img" /> 还有{{ state.taskNums }}个未完成任务</div
                    >
                    <a-form :model="state.releaseForm" ref="releaseRef" :rules="releaseRules">
                        <a-row>
                            <a-col :span="24">
                                <a-form-item label="发布日期" name="publishTime">
                                    <a-date-picker
                                        v-model:value="state.releaseForm.publishTime"
                                        style="width: 100%"
                                        value-format="YYYY-MM-DD"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item label="描述" name="description">
                                    <a-textarea v-model:value="state.releaseForm.description" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
            </a-modal>
            <!--          发布版本-->
            <div class="body">
                <div class="top-search">
                    <!-- 第一行筛选条件 -->
                    <a-row :gutter="16">
                        <a-col :span="5">
                            <a-form-item label="版本号">
                                <a-select
                                    v-model:value="state.filter.id"
                                    placeholder="请选择"
                                    allowClear
                                    :options="state.versionList"
                                    show-search
                                    :filter-option="
                                        (input, option) => {
                                            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    "
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="5">
                            <a-form-item label="开始时间">
                                <a-date-picker
                                    value-format="YYYY-MM-DD"
                                    v-model:value="state.filter.startTime"
                                    style="width: 100%"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="5">
                            <a-form-item label="发布时间" name="planTime">
                                <a-date-picker
                                    value-format="YYYY-MM-DD"
                                    v-model:value="state.filter.publishTime"
                                    style="width: 100%"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="4">
                            <a-space>
                                <a-button type="primary" @click="getData(true)">查询</a-button>
                                <a-button @click="reset" type="primary" ghost>重置</a-button>
                            </a-space>
                        </a-col>
                    </a-row>
                </div>
                <div class="content">
                    <div class="table-top">
                        <div class="tip-msg">
                            <a-radio-group v-model:value="state.filter.status" button-style="solid" @change="getData">
                                <a-radio-button value="已发布">已发布</a-radio-button>
                                <a-radio-button value="未发布">未发布</a-radio-button>
                                <a-radio-button value="">全部</a-radio-button>
                            </a-radio-group>
                        </div>

                        <a-space :size="12">
                            <a-button
                                @click="handleMergeVersion"
                                v-permission="'3000001154_vid_gkbmippbip'"
                                type="primary"
                                >版本合并</a-button
                            >
                            <a-button
                                @click="handleAddVersion"
                                v-permission="'3000001154_vid_fo52wvzdkc'"
                                type="primary"
                                >新建版本</a-button
                            >
                        </a-space>
                    </div>
                    <div class="table-box-version">
                        <a-table
                            :columns="columns"
                            :data-source="state.dataSource"
                            bordered
                            :pagination="pagination"
                            @change="handleTableChange"
                            :loading="state.tableLoading"
                            :scroll="{ y: state.tableHeight }"
                        >
                            <template #headerCell="{ column, title }">
                                <template v-if="title === '操作'">
                                    <div style="display: flex; align-items: center; justify-content: center">{{
                                        title
                                    }}</div>
                                </template>
                            </template>
                            <template #bodyCell="{ record, text, column, index }">
                                <template v-if="column.dataIndex === 'progress'">
                                    <span style="color: #52b415">{{ record.finishedTaskCount }}</span
                                    >/<span style="color: #3875ff; cursor: pointer" @click="showTaskModal(record.id)">{{
                                        record.taskCount
                                    }}</span>
                                </template>
                                <template v-else-if="column.dataIndex === 'operation'">
                                    <a-space :size="0">
                                        <a-button
                                            type="link"
                                            v-if="record.status === '未发布'"
                                            size="small"
                                            v-permission="'3000001154_vid_prlxqlgd2g'"
                                            @click="handleShowRelease(record)"
                                            >发布</a-button
                                        >
                                        <a-popconfirm
                                            title="确定取消发布吗?"
                                            @confirm="handleSubmitReleaseVersion(record, false)"
                                        >
                                            <a-button
                                                v-permission="'3000001154_vid_prlxqlgd2g'"
                                                type="link"
                                                v-if="record.status === '已发布'"
                                                size="small"
                                                >取消发布</a-button
                                            >
                                        </a-popconfirm>

                                        <a-button type="link" size="small" @click="handleEditVersion(record)"
                                            >编辑</a-button
                                        >
                                        <a-popconfirm title="确定删除吗?" @confirm="handleDeleteVersion(record)">
                                            <a-button type="link" size="small">删除</a-button>
                                        </a-popconfirm>
                                    </a-space>
                                </template>
                            </template>
                        </a-table>
                    </div>
                </div>
            </div>

            <!-- end vid_qyl0iu990t 自定义模板_wz3g4kitti -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        },
        'projectId': {
            type: [String, Number],
            default: undefined
        },
        activeKey: String,
        refreshCount: Number
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    const pagination = ref({
        current: 1,
        pageSize: 10,
        showSizeChanger: true,
        total: 0,
        pageSizeOptions: ['10', '20', '40', '60', '80', '100'],
        showTotal: total =>
            `共 ${total} 个项目 第 ${pagination.value.current}/${Math.ceil(total / pagination.value.pageSize)}页`
    })
    const state = reactive({
        filter: {
            publishTime: undefined,
            startTime: undefined,
            id: undefined,
            status: ''
        },
        versionList: [],
        dataSource: [],
        addOrEditVisible: false,
        submitVersionLoading: false,
        addOrEditTitle: '',
        modelForm: {
            version: undefined,
            startTime: undefined,
            publishTime: undefined,
            description: undefined
        },
        mergeVisible: false,
        mergeLoading: false,
        mergeForm: {
            beMergeList: [],
            mergeTo: undefined
        },
        releaseVisible: false,
        releaseLoading: false,
        releaseTitle: '',
        taskNums: undefined,
        releaseForm: {
            publishTime: undefined,
            description: undefined
        },
        tableHeight: 600,
        isFirst: false,
        tableLoading: false
    })
    watch(
        () => [props.projectId, props.activeKey, props.refreshCount],
        val => {
            getData()
        },
        { immediate: true }
    )
    const headerOffset = ref(210)
    const calcTableHeight = () => {
        state.tableHeight = window.innerHeight - 180 - headerOffset.value
    }
    onMounted(() => {
        calcTableHeight()
        window.addEventListener('resize', calcTableHeight)
    })
    onBeforeUnmount(() => {
        window.removeEventListener('resize', calcTableHeight)
    })

    const inputHolder = '请输入'
    const selectHolder = '请选择'
    const columns = ref([
        { title: '版本号', dataIndex: 'version', align: 'center', ellipsis: true, width: 150 },
        { title: '状态', dataIndex: 'status', align: 'center', ellipsis: true, width: 150 },
        { title: '进度', dataIndex: 'progress', align: 'center', ellipsis: true, width: 100 },
        { title: '开始时间', dataIndex: 'startTime', align: 'center', ellipsis: true, width: 180 },
        { title: '计划发布时间', dataIndex: 'endTime', align: 'center', ellipsis: true, width: 180 },
        { title: '实际发布时间', dataIndex: 'publishTime', align: 'center', ellipsis: true, width: 180 },
        { title: '创建时间', dataIndex: 'createdTime', align: 'center', ellipsis: true, width: 180 },
        { title: '创建人', dataIndex: 'createdBy', align: 'center', ellipsis: true , width: 180},
        { title: '描述', dataIndex: 'description', align: 'center', ellipsis: true , width: 180},
        { title: '操作', dataIndex: 'operation', align: 'left', ellipsis: true, width: 200, fixed: 'right' }
    ])
    const rules = {
        'version': [{ required: true, message: '请输入版本号', trigger: ['blur', 'change'] }],
        'startTime': [{ required: false, message: '请选择开始时间', trigger: ['blur', 'change'] }],
        'endTime': [{ required: false, message: '请选择发布时间', trigger: ['blur', 'change'] }],
        'description': [{ required: false, message: '请输入描述', trigger: ['blur', 'change'] }]
    }
    const mergeRules = {
        'beMergeList': [{ required: true, message: '请选择合并版本', trigger: ['blur', 'change'] }],
        'mergeTo': [{ required: true, message: '请选择合并至版本', trigger: ['blur', 'change'] }]
    }
    const releaseRules = {
        'publishTime': [{ required: true, message: '请选择发布日期', trigger: ['blur', 'change'] }],
        'description': [{ required: true, message: '请输入描述', trigger: ['blur', 'change'] }]
    }
    function getData(flag) {
        console.log(flag)
        if (flag) {
            pagination.value.current = 1
        }
        state.tableLoading = true
        post('/solution-ppm/api/v2/built-in-system-ppm/iteration_version/search', {
            ...state.filter,
            projectId: props.projectId,
            pageNo: pagination.value.current,
            pageSize: pagination.value.pageSize
        })
            .then(data => {
                if (data.code !== 200) {
                    state.dataSource = []
                    return
                }
                state.dataSource = data.data.dataList
                pagination.value.total = data.data.totalElements
                getAllVersion()
            })
            .finally(() => {
                state.tableLoading = false
            })
    }
    function getAllVersion() {
        post('/solution-ppm/api/v2/built-in-system-ppm/iteration_version/list', {
            projectId: props.projectId
        }).then(data => {
            state.versionList = data.data.map(item => {
                return {
                    label: item.version,
                    value: item.id,
                    status: item.status // 👈 保留状态
                }
            })
        })
    }
    function reset() {
        state.filter = {
            publishTime: undefined,
            startTime: undefined,
            version: undefined,
            status: ''
        }
        pagination.value.current = 1
        pagination.value.pageSize = 10
        getData()
    }
    const pageSizeChange = (current, size) => {
        pagination.value.current = current
        pagination.value.pageSize = size
        getData()
    }
    const pageChange = (page, pageSize) => {
        pagination.value.current = page
        pagination.value.pageSize = pageSize
        getData()
    }

    const handleTableChange = (paginationInfo, filters, sorter) => {
        console.log(paginationInfo, 'paginationInfo')
        pagination.value.current = paginationInfo.current
        pagination.value.pageSize = paginationInfo.pageSize
        getData()
    }
    const addOrEditRef = ref(null)

    const currentVersionData = ref({})
    function handleAddVersion() {
        if (!props.projectId) {
            message.info('请选择项目')
            return
        }
        state.addOrEditVisible = true
        state.addOrEditTitle = '新建版本'
    }
    function handleEditVersion(record) {
        const data = cloneDeep(record)
        currentVersionData.value = data
        Object.assign(state.modelForm, data)
        state.addOrEditVisible = true
        state.addOrEditTitle = '编辑版本'
    }
    function handleDeleteVersion(record) {
        del(`/solution-ppm/api/v2/built-in-system-ppm/iteration_version/${record.id}`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            message.success(data.message)
            getData()
        })
    }
    function handleSubmitVersion() {
        addOrEditRef.value.validate().then(() => {
            state.submitVersionLoading = true
            const api = currentVersionData.value.id ? put : post
            api('/solution-ppm/api/v2/built-in-system-ppm/iteration_version', {
                ...state.modelForm,
                projectId: props.projectId
            })
                .then(data => {
                    if (data.code !== 200) {
                        message.error(data.message)
                        return
                    }
                    message.success(data.message)
                    cancelAddOrEdit()
                    getData()
                })
                .finally(() => {
                    state.submitVersionLoading = false
                })
        })
    }
    function cancelAddOrEdit() {
        state.addOrEditVisible = false
        currentVersionData.value = {}
        state.modelForm = {
            version: undefined,
            startTime: undefined,
            publishTime: undefined,
            description: undefined
        }
    }
    const mergeRef = ref(null)
    const beMergeOptions = computed(() => {
        return state.versionList.filter(
            v =>
                v.status === '未发布' && // 只要未发布
                v.value !== state.mergeForm.mergeTo // 排除合并至
        )
    })

    const mergeToOptions = computed(() => {
        return state.versionList.filter(
            v =>
                v.status === '未发布' && // 只要未发布
                !state.mergeForm.beMergeList?.includes(v.value) // 排除已选合并版本
        )
    })

    function handleMergeVersion() {
        state.mergeVisible = true
    }
    function handleSubmitMergeVersion() {
        mergeRef.value.validate().then(() => {
            state.mergeLoading = true
            put('/solution-ppm/api/v2/built-in-system-ppm/iteration_version/version_merge', {
                projectId: props.projectId,
                ...state.mergeForm
            })
                .then(data => {
                    if (data.code !== 200) {
                        message.error(data.message)
                        return
                    }
                    message.success(data.message)
                    cancelMerge()
                    getData()
                })
                .finally(() => {
                    state.mergeLoading = false
                })
        })
    }
    function cancelMerge() {
        state.mergeVisible = false
        state.mergeForm.mergeTo = undefined
        state.mergeForm.beMergeList = []
    }
    const currentReleasrData = ref({})
    function handleShowRelease(record) {
        currentReleasrData.value = record
        state.taskNums = record.noFinishTaskCount
        state.releaseVisible = true
        state.releaseForm.publishTime = dayjs().format('YYYY-MM-DD')
        state.releaseForm.description = record.description
        state.releaseTitle = '版本发布'
    }
    const releaseRef = ref(null)
    function handleSubmitReleaseVersion(record, needValidate = true) {
        const doRequest = () => {
            state.releaseLoading = true
            put('/solution-ppm/api/v2/built-in-system-ppm/iteration_version/status_change', {
                id: record.id ? record.id : currentReleasrData.value.id,
                projectId: props.projectId,
                publishTime: state.releaseForm.publishTime,
                description: state.releaseForm.description
            })
                .then(data => {
                    if (data.code !== 200) {
                        message.error(data.message)
                        return
                    }
                    message.success(data.message)
                    cancelRelease()
                    getData()
                })
                .finally(() => {
                    state.releaseLoading = false
                })
        }

        if (needValidate) {
            releaseRef.value.validate().then(() => {
                doRequest()
            })
        } else {
            doRequest()
        }
    }

    function cancelRelease() {
        state.releaseVisible = false
        state.releaseForm.publishTime = undefined
        state.releaseForm.description = undefined
        currentReleasrData.value = {}
    }
    function jumpTask(id) {
        window.open(`${import.meta.env.VITE_PUBLIC_PATH}/page/3000001214`, '_blank')
    }
    function showTaskModal(id) {
        taskModalId.value = id
        taskMoadlVisible.value = true
    }
    const taskModalId = ref()
    const taskMoadlVisible = ref(false)
    import TaskJump from './Page3000001214.vue'
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }
    /*样式*/
    .body {
        height: 100%;
        .top-search {
            background-color: #fff;
            padding: 0 16px;
        }
        .top-search :deep(.ant3-row) {
            height: 42px;
        }
        .top-search :deep(.ant3-col) {
            height: 42px;
        }
        .content {
            background-color: #fff;
            padding: 0px 16px 16px 16px;
            height: 100%;
        }
        .table-top {
            display: flex;
            justify-content: space-between;
            margin-bottom: 22px;
            align-items: center;
        }
        .tip-msg {
            height: 16px;
            line-height: 16px;
            font-size: 16px;
            font-weight: 600;
        }
    }
    .merge-form-div {
        .top-tip {
            font-size: 14px;
            letter-spacing: 0;
            text-align: justify;
            font-weight: 600;
            color: #ff8022;
            background: rgb(250 100 0 / 5%);
            padding: 6px 16px;
            margin-bottom: 16px;
        }
    }
    .merge-form-div:deep(.ant3-form-item-label) {
        width: 95px;
    }
    .form-div:deep(.ant3-form-item-label) {
        width: 120px;
    }
    .red-color {
        font-weight: 600;
        color: #ff2a00;
    }
    .tip-img {
        margin-right: 4px;
    }
    .table-box-version :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        border-bottom: 1px solid #d9d9d9;
        padding: 8px 16px;
        word-break: break-all;
    }
    .table-box-version:deep(.ant3-pagination) {
        margin-bottom: 0;
    }
</style>
